---
type: tutorial
title: Estilize sua página Sobre
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Adicione uma tag style do Astro para estilos escopados na página
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Agora que você tem uma página Sobre com conteúdo sobre você, é hora de estilizá-la!

<PreCheck>
  - Estilizar itens em uma única pagina
  - Utilizar variáveis CSS
</PreCheck>


## Estilize uma página individual

Utilizando as próprias tags `<style></style>` do Astro, você pode estilizar itens na sua página. Adicionar **atributos** e **diretivas** a essas tags te dão ainda mais formas de estilizar.

<Steps>
1. Copie o seguinte código e o cole em `src/pages/about.astro`:

    ```astro title="src/pages/about.astro" ins={6-11}
    <html lang="pt-BR">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head> 

    ```

    Verifique todas as três páginas na pré-visualização do seu navegador.
    
    - Qual cor é o título da página em:

        - Sua página Início?  <Spoiler>preto</Spoiler>
        - Sua página Sobre? <Spoiler>roxo</Spoiler>
        - Sua página Blog? <Spoiler>preto</Spoiler>

    - A página com o maior texto de título é? <Spoiler>Sua página Sobre</Spoiler>

    :::tip
    Se você não consegue determinar cores visualmente, você pode utilizar as ferramentas do desenvolvedor no seu navegador para inspecionar os elementos de título `<h1>` e verificar a cor aplicada ao texto.
    :::

2. Adicione o nome de classe `skill` aos elementos `<li>` gerados em sua página Sobre, para que possa estilizá-los. Seu código deve se parecer com isso:

    ```astro title="src/pages/about.astro" 'class="skill"'
    <p>Minhas habilidades são:</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
    ```

3. Adicione o seguinte código a sua tag style existente:

    ```astro title="src/pages/about.astro" ins={6-9}
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>
    ```



  4. Visite sua página Sobre no seu navegador novamente, e verifique, visualmente ou por ferramentas do desenvolvedor, que cada item na sua lista de habilidades agora é verde e está em negrito.
</Steps>

## Utilize sua primeira variável CSS
A tag `<style>` do Astro também pode referenciar quaisquer variáveis do seu script frontmatter utilizando a diretiva `define:vars={ {...} }`. Você pode **definir variáveis dentro da sua cerca de código**, e então **utilizá-las como variáveis CSS em sua tag style**.

<Steps>
1. Defina a variável  `skillColor` a adicionando ao script frontmatter de `src/pages/about.astro` assim:

    ```astro title="src/pages/about.astro" ins={17}
    ---
    const pageTitle = "Sobre Mim";

    const identity = {
      firstName: "Sarah",
      country: "Canadá",
      occupation: "Escritora Técnica",
      hobbies: ["fotografia", "observar pássaros", "beisebol"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Escrever Documentação"];

    const happy = true;
    const finished = false;
    const goal = 3;
  
    const skillColor = "navy";
    ---
    ```

2. Atualize sua tag `<style>` existente abaixo para primeiro definir, e então utilizar essa variável `skillColor` dentro de duas chaves.

    ```astro title="src/pages/about.astro" "define:vars={{skillColor}}" "var(--skillColor)" del={7} ins={8}
    <style define:vars={{skillColor}}> 
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>
    ```

3. Verifique sua página Sobre na pré-visualização do seu navegador. Você deve ver que as habilidades agora estão em azul-marinho, como foi definido pela variável `skillColor` passada para a diretiva `define:vars`.
</Steps>

<Box icon="puzzle-piece">

## Tente você mesmo - Defina variáveis CSS
 
<Steps>
 1. Atualize a tag `<style>` na sua página Sobre para que ela corresponda com o código abaixo. 

    ```astro title="src/pages/about.astro"
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>
    ```
 
 2. Adicione quaisquer definições de variáveis faltando no seu script frontmatter para que sua nova tag `<style>` aplique esses estilos a sua lista de habilidades com sucesso:
    - A cor do texto é azul-marinho
    - O texto está em negrito
    - Os itens da lista estão completamente em maiúscula
</Steps>
<details>
<summary>✅ Me mostre o código! ✅</summary>

```astro title="src/pages/about.astro" ins={18-19}
---
const pageTitle = "Sobre Mim";

const identity = {
  firstName: "Sarah",
  country: "Canadá",
  occupation: "Escritora Técnica",
  hobbies: ["fotografia", "observar pássaros", "beisebol"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Escrever Documentação"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---
```
</details>

</Box>



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Eu posso adicionar estilos CSS para uma página individual utilizando uma tag `<style>` do Astro.
- [ ] Eu posso utilizar variáveis para estilizar elementos em uma página.
</Checklist>
</Box>

### Recursos
- [Sintaxe do Astro vs JSX - comparação](/pt-br/reference/astro-syntax/#diferenças-entre-astro-e-jsx)

- [tag `<style>` do Astro](/pt-br/guides/styling/#styling-in-astro)

- [Variáveis CSS no Astro](/pt-br/guides/styling/#css-variables)



